<template>
    <el-dialog
        :title="!dataForm.id ? $t('handle.add') : show? $t('handle.update') : $t('handle.detail')"
        :close-on-click-modal="false"
        :visible.sync="visible">
    <div v-loading = loading>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
      <el-form-item label="反映人姓名" prop="name">
        <el-input v-model="dataForm.name"
         placeholder="反映人姓名"></el-input>
      </el-form-item>
      <el-form-item label="反映人联系方式" prop="phone">
        <el-input v-model="dataForm.phone" placeholder="反映人联系方式" ></el-input>
      </el-form-item>
      <el-form-item label="受理时间" prop="acceptDate">
        <el-date-picker
          v-model="dataForm.acceptDate"
          style="width: 100%;"
          type="datetime"
          placeholder="选择受理时间"
          value-format="yyyy-MM-dd hh:mm:ss"
        ></el-date-picker>
      </el-form-item>
<!--       <el-form-item label="受理时间" prop="acceptDate">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="date1" style="width: 100%;"  value-format="yyyy-MM-dd"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker placeholder="选择时间" v-model="date2" style="width: 100%;" value-format="HH:mm:ss"></el-time-picker>
        </el-col>
      </el-form-item>
      <span ></span> -->
      <el-form-item label="办理情况" prop="handlingSituation">
          <el-select style="width: 100%;" v-model="dataForm.handlingSituation" filterable placeholder="请选择">
            <el-option v-for="item in dicts" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="反映问题详情" prop="content">
        <el-input type="textarea"
        :disabled="true"
        :rows="10"
        :maxlength = "500"
        v-model="dataForm.content" placeholder="反映问题详情(最长500字符)"></el-input>
      </el-form-item>
      <el-form-item label="办结人姓名" prop="handingName">
        <el-input v-model="dataForm.handingName"
         placeholder="办结人姓名"></el-input>
      </el-form-item>
      <el-form-item label="受理时间" prop="acceptDate">
        <el-date-picker
          v-model="dataForm.handingDate"
          style="width: 100%;"
          type="datetime"
          placeholder="选择办结时间"
          value-format="yyyy-MM-dd hh:mm:ss"
        ></el-date-picker>
      </el-form-item>
<!--       <el-form-item label="办结时间" prop="handingDate">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="date3" style="width: 100%;"  value-format="yyyy-MM-dd"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker placeholder="选择时间" v-model="date4" style="width: 100%;" value-format="HH:mm:ss"></el-time-picker>
        </el-col>
      </el-form-item> -->
      <el-form-item label="办结详情" prop="handingDetails">
        <el-input type="textarea"
        :rows="10"
        :maxlength = "500"
        v-model="dataForm.handingDetails" placeholder="办结详情(最长500字符)"></el-input>
      </el-form-item>
    </el-form>
    <div style="text-align:right;">
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('handle.cancel') }}</el-button>
      <el-button v-if="show" type="primary" @click="dataFormSubmit()">{{ $t('handle.confirm') }}</el-button>
    </span>
    </div>
    </div>
  </el-dialog>
</template>
<script>
import { dateFormate, isMobile } from "@/utils/validate";
export default {
  data() {
    // 严格的验证规则可以放到这里验证
    let checkCPhone = (rule, value, callback) => {
      if (value !== "") {
        if (isMobile(value)) {
          callback();
        } else {
          callback(new Error("手机格式不正确"));
        }
      } else {
        callback();
      }
    };
    return {
      loading: false,
      date1: "",
      date2: "",
      date3: "",
      date4: "",
      dicts: [],
      show: true,
      visible: false,
      dataForm: {
        id: "",
        name: "",
        phone: "",
        handlingSituation: "",
        content: "",
        handingName: "",
        handingDate: "",
        handingDetails: "",
        acceptDate: ""
      },
      // 验证Todo 其他的验证后续加上
      dataRule: {
        name: [{ required: true, message: "不能为空", trigger: "blur" }],
        phone: [{ validator: checkCPhone, trigger: "blur" }],
        handlingSituation: [
          { required: true, message: "状态不能为空", trigger: "blur" }
        ],
        handingName: [{ required: true, message: "不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    init(id, dicts) {
      this.dicts = dicts;
      this.show = true;
      this.visible = true;
      this.dataForm.id = id || 0;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
      });
      if (this.dataForm.id) {
        this.$http({
          url: `/dg-ic/ic/public-opinion-collection/info/${this.dataForm.id}`,
          method: "get",
          params: this.$http.adornParams()
        }).then(
          ({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.name = data.data.name;
              this.dataForm.phone = data.data.phone;
              this.dataForm.handlingSituation = String(
                data.data.handlingSituation
              );
              this.dataForm.content = data.data.content;
              this.dataForm.acceptDate = data.data.acceptDate;
              this.dataForm.handingDate = data.data.handingDate;
              this.dataForm.handingName = data.data.handingName;
              this.date1 = data.data.acceptDate;
              this.date2 = dateFormate(
                data.data.acceptDate,
                this.date1,
                this.date2
              );
              this.date3 = data.data.handingDate;
              this.date4 = dateFormate(
                data.data.handingDate,
                this.date3,
                this.date4
              );
            } else {
              this.$message.error(data.msg);
            }
          },
          error => {
            if (error.response.status === 403) {
              this.$message.error("你没有权限");
            } else {
              this.$message.error("系统错误，请联系管理员");
            }
          }
        );
      }
    },
    detail(id, dicts) {
      this.dicts = dicts;
      this.show = false;
      this.visible = true;
      this.dataForm.id = id || 0;
      if (this.dataForm.id) {
        this.$http({
          url: `/dg-ic/ic/public-opinion-collection/info/${this.dataForm.id}`,
          method: "get",
          params: this.$http.adornParams()
        }).then(
          ({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.name = data.data.name;
              this.dataForm.handingName = data.data.handingName;
              this.dataForm.phone = data.data.phone;
              this.dataForm.handlingSituation = String(
                data.data.handlingSituation
              );
              this.dataForm.content = data.data.content;
              this.dataForm.handingDate = data.data.handingDate;
              this.dataForm.acceptDate = data.data.acceptDate;
              this.date1 = data.data.acceptDate;
              this.date2 = dateFormate(
                data.data.acceptDate,
                this.date1,
                this.date2
              );
              this.date3 = data.data.handingDate;
              this.date4 = dateFormate(
                data.data.handingDate,
                this.date3,
                this.date4
              );
            } else {
              this.$message.error(data.msg);
            }
          },
          error => {
            if (error.response.status === 403) {
              this.$message.error("你没有权限");
            } else {
              this.$message.error("系统错误，请联系管理员");
            }
          }
        );
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(validate => {
        if (validate) {
          this.loading = true;
          this.$http({
            url: `/dg-ic/ic/public-opinion-collection/${
              !this.dataForm.id ? "save" : "update"
            }`,
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              name: this.dataForm.name,
              handingName: this.dataForm.handingName,
              phone: this.dataForm.phone,
              housingEstateId: sessionStorage.getItem("thiscommunityId") || "",
              handlingSituation: this.dataForm.handlingSituation,
              content: this.dataForm.content,
              createBy: this.$store.state.user.id,
              updateBy: this.$store.state.user.id,
              acceptDateS: this.dataForm.acceptDate,
              handingDateS: this.dataForm.handingDate
              // 后续的字段后续加上
            })
          }).then(
            ({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.loading = false;
                    this.visible = false;
                    this.$emit("refreshDataList");
                  }
                });
              } else {
                this.$message.error(data.msg);
                this.loading = false;
              }
            },
            error => {
              if (error.response.status === 403) {
                this.$message.error("你没有权限");
                this.loading = false;
              } else {
                this.$message.error("系统错误，请联系管理员");
                this.loading = false;
              }
            }
          );
        }
      });
    }
  }
};
</script>
